<script lang="ts" setup>
import DateIcon from '@/assets/images/date.svg';
import { reactive, watch } from 'vue';

const state = reactive({
  dateType: '',
  valueFormat: '',
  dateNum: 1,
  dateNumType: '1',
  dateValue:"",
});
const props = defineProps({
  tagData: {
    type: Object,
    default: () => {}
  },
  rangeType: {
    type: String,
    default: ''
  },
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);

const dateChange = (value: any, date: any, dateString: any) => {
  let quarter = '';
  if (props.tagData.id == -6) {
    if (value && value.indexOf('01') != -1) {
      quarter = value.substr(0, 4) + 'Q1';
    } else if (value && value.indexOf('04') != -1) {
      quarter = value.substr(0, 4) + 'Q2';
    } else if (value && value.indexOf('07') != -1) {
      quarter = value.substr(0, 4) + 'Q3';
    } else if (value && value.indexOf('10') != -1) {
      quarter = value.substr(0, 4) + 'Q4';
    }
    emit('update:modelValue', quarter);
  } else {
    emit('update:modelValue', value);
  }
};
//相对时间处理
const detaNumChange = () => {
  let dateValue = 0;
  if (state.dateNumType == '1') {
    dateValue = 0 - state.dateNum;
  }else{
    dateValue = state.dateNum;
  }
  emit('update:modelValue', dateValue);
};

/**
 * -1  年  %Y
 * -2  月  %Y-%m
 * -3  日  %Y-%m-%d
 * -4  时  %Y-%m-%d-%h
 * -5  周  %Y-%u
 * 处理日期类型
 */
const returnDateType = (id: number) => {
  state.dateType = '';
  state.valueFormat = '';
  //相对时间不执行
  if (props.rangeType == 'RELATIVE') {
    return false;
  }
  if (id == -1) {
    state.dateType = 'year';
    state.valueFormat = 'YYYY';
  } else if (id == -2) {
    state.dateType = 'month';
    state.valueFormat = 'YYYY-MM';
  } else if (id == -3) {
    state.dateType = 'date';
    state.valueFormat = 'YYYY-MM-DD';
  } else if (id == -4) {
    state.dateType = 'datetime';
    state.valueFormat = 'YYYY-MM-DD HH';
  } else if (id == -5) {
    state.dateType = 'week';
    state.valueFormat = 'yyyy-ww';
  } else if (id == -6) {
    state.dateType = 'quarter';
    state.valueFormat = '';
    if (props.modelValue.indexOf('Q1') != -1) {
      state.dateValue = props.modelValue.substring(0, 4) + '-01';
    } else if (props.modelValue.indexOf('Q2') != -1) {
      state.dateValue = props.modelValue.substring(0, 4) + '-04';
    } else if (props.modelValue.indexOf('Q3') != -1) {
      state.dateValue = props.modelValue.substring(0, 4) + '-07';
    } else if (props.modelValue.indexOf('Q4') != -1) {
      state.dateValue = props.modelValue.substring(0, 4) + '-10';
    }
  }
};

watch(
  () => props.rangeType,
  (val: any) => {
    if (val) {
      returnDateType(props.tagData.id);
    }
  },
  { immediate: true }
);
</script>
<template>
  <a-year-picker
    v-if="state.dateType == 'year'"
    v-model="props.modelValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-year-picker>
  <a-quarter-picker
    v-if="state.dateType == 'quarter'"
    v-model="state.dateValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-quarter-picker>
  <a-month-picker
    v-if="state.dateType == 'month'"
    v-model="props.modelValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-month-picker>
  <a-week-picker
    v-if="state.dateType == 'week'"
    v-model="props.modelValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-week-picker>
  <a-date-picker
    v-if="state.dateType == 'date'"
    :format="state.valueFormat"
    v-model="props.modelValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-date-picker>
  <a-date-picker
    v-if="state.dateType == 'datetime'"
    show-time
    :format="state.valueFormat"
    v-model="props.modelValue"
    :placeholder="props.placeholder"
    :style="{ width: '100%' }"
    @change="dateChange"
  >
    <template #suffix-icon>
      <img :src="DateIcon" class="date-img" />
    </template>
  </a-date-picker>
  <div class="relative-date" v-if="props.rangeType == 'RELATIVE'">
    <div class="label">距今</div>
    <a-input-number
      v-model="state.dateNum"
      :style="{ width: '104px', marginRight: '6px' }"
      :min="1"
      :precision="0"
      @change="detaNumChange"
      size="large"
    />
    <div class="label">{{ props.tagData.cnName }}</div>
    <a-select
      :style="{ width: '70px' }"
      v-model="state.dateNumType"
      @change="detaNumChange"
      size="large"
    >
      <a-option value="1">前</a-option>
      <a-option value="2">后</a-option>
    </a-select>
  </div>
</template>
<style lang="scss" scoped>
.date-img {
  vertical-align: -2px;
}
.relative-date {
  display: flex;
  align-items: center;
  .label {
    height: 36px;
    line-height: 36px;
    width: 56px;
    text-align: center;
    background: #f6f8fc;
    border: 1px solid #d4d7e1;
    border-radius: 3px;
    margin-right: 6px;
  }
}
</style>